<template>
	<view>
		<head-top></head-top>
		<view class="answers-details-container">
            <view class="menu-list">
            	<view class="menu-item" @click="navigateTo('/pages/goods/index')">
            		<div>
            			<i class="hd-icon">&#xe639;</i>
            		</div>
            		<h3>商品</h3>
            	</view>
            	<view class="menu-item" @click="navigateTo('/pages/answers/index')">
            		<div>
            			<i class="hd-icon">&#xe893;</i>
            		</div>
            		<h3>问答</h3>
            	</view>
            	<view class="menu-item" @click="navigateTo('/pages/reputation/index')">
            		<div>
            			<i class="hd-icon">&#xe673;</i>
            		</div>
            		<h3>口碑</h3>
            	</view>
            	<view class="menu-item" @click="navigateTo('/pages/information/index')">
            		<div>
            			<i class="hd-icon">&#xe60a;</i>
            		</div>
            		<h3>资讯</h3>
            	</view>
            	<view class="menu-item" @click="switchTab('/pages/brand/index')">
            		<div>
            			<i class="hd-icon">&#xe604;</i>
            		</div>
            		<h3>品牌</h3>
            	</view>
            </view>
			<view class="a-title">{{title}}</view>
			<view class="answers-history">{{addtime}}</view>
			<we-chat-user :name="wxInfo.weixin_name" :imgUrl="wxInfo.weixin_image"></we-chat-user>
            <jyf-parser  :tag-style="tagStyle" lazy-load show-with-animation use-cache class="information" :html="content" ref="article"></jyf-parser>
			<div class="answers-rote">
				<h3>老司机测试题</h3>
				<p>每次护士姐姐来给我输液，我都要故意装着不懂去问这绑在手上的橡胶管是什么东东，其实就为了听到从护士姐姐甜美的口中吐出那舒心的三个字……</p>
				<view class="answers-pages">
					<p v-if="nextArticle.id>1" @click="navigateTo('./details?id='+nextArticle.id)">上一篇：{{nextArticle.title}}</p>
					<p v-if="preArticle.id" @click="navigateTo('./details?id='+preArticle.id)">下一篇：{{preArticle.title}}</p>
				</view>
			</div>
		</view>
		<view class="answers-shop">
			<h3>{{siteInfo.name}}专卖店</h3>
			<view class="answers-shop-list">
				<view class="li" @click="navigateTo('/pages/goods/index?id='+siteInfo.id)">商品列表</view>
				<view class="li" @click="navigateTo('/pages/shop/index?id='+siteInfo.id)">进入店铺</view>
			</view>
		</view>
		<!-- 销量与猜你喜欢 -->
		<sales leftTitle="销量排行榜" rightTitle="新品上市" :leftList="salesGoodsList" :rightList="latestGoodsList"></sales>
		<view class="follow-contanier-box">
			<div class="follow-contanier">
				<h3>最受关注排行榜</h3>
				<view class="follow-list">
					<view class="li" @click="navigateTo('./details?id='+item.id)" v-for="(item,index) in rankingNewsList" :key="index">{{item.title}}</view>
				</view>
			</div>
			<div class="follow-contanier">
				<h3>最新问题</h3>
				<view class="follow-list">
					<view class="li" v-for="(item,index) in rankingAskList" :key="index" @click="navigateTo('/pages/answers/details?id='+item.id)">{{item.title}}</view>
				</view>
			</div>
		</view>
		<p class="foot-copy">{{siteInfo.description}}</p>
		<foot-bottom></foot-bottom>
		<fab :topBtn="isTopBtn"></fab>
	</view>
</template>

<script>
	import fab from '@/components/fab'; //快捷菜单
	import weChatUser from '@/components/WeChatUser'; //微信客服
	import footBottom from '@/components/footBottom'; //公共底部
	import {
		newsDetails
	} from '@/api/news';
	import parser from "@/components/jyf-parser/jyf-parser";
	export default {
		data() {
			return {
				siteInfo: '',
				wxInfo: '',
				title: '',
				addtime: '',
				content: '',
				nextArticle: '',
				preArticle: '',
				salesGoodsList:[],
				latestGoodsList:[],
				rankingNewsList:[],
				rankingAskList:[],
				isTopBtn: false,
				tagStyle: {
					img: 'width:100%'
				}
			}
		},
		components: {
			fab,
			footBottom,
			weChatUser,
			"jyf-parser": parser,
		},
		onPageScroll(e) {
			if (e.scrollTop >= 400) {
				this.isTopBtn = true
			}
			if (e.scrollTop <= 100) {
				this.isTopBtn = false
			}
		},
		onLoad(e) {
			newsDetails(e.id).then((res) => {
				const {
					siteInfo,
					wxInfo,
					title,
					addtime,
					content,
					nextArticle,
					preArticle,
					salesGoodsList,
					latestGoodsList,
					rankingNewsList,
					rankingAskList
				} = res.data.datas;
				this.siteInfo = siteInfo
				this.wxInfo = wxInfo
				this.title = title
				this.addtime = addtime
				this.content = content
				this.nextArticle = nextArticle
				this.preArticle = preArticle
				this.salesGoodsList = salesGoodsList
				this.latestGoodsList = latestGoodsList
				this.rankingNewsList = rankingNewsList
				this.rankingAskList = rankingAskList
			})
		},
		methods: {
			trigger(e) {
				uni.redirectTo({
					url: e.item.url
				});
			},
			navigateTo(url) {
				uni.navigateTo({
					url: url
				});
			},
            switchTab(url){
                uni.switchTab({
                	url: url
                });
            },
		}
	}
</script>

<style lang="scss" scoped>
	.answers-details-container {
		background: #fff;
		margin-top: 90rpx;

		.information {
			width: 700rpx;
			margin: 0 auto;

			/deep/ image {
				width: 100%;
			}
		}

		.a-title {
			width: 700rpx;
			margin: 0 auto;
			font-size: 36rpx;
			display: flex;
			align-items: center;
			padding: 20rpx 0;
		}

		.answers-history {
			width: 700rpx;
			margin: 0 auto;
			text-align: left;
			font-size: 24rpx;
			color: #b2b2b2;
		}

		.answers-rote {
			width: 700rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			border-top: 1px solid #eee;
			padding-top: 20rpx;

			h3 {
				color: #666;
				font-size: 32rpx;
				text-align: center;
			}

			&>p {
				color: #666;
				font-size: 28rpx;
				margin-top: 20rpx;
			}

			.answers-pages {
				padding-bottom: 30rpx;

				p {
					color: #fd8197;
					font-size: 28rpx;
					margin-top: 30rpx;
				}
			}
		}
	}

	.answers-shop {
		background: #fff;
		border-top: 1px solid #eee;
		border-bottom: 1px solid #eee;
		padding: 40rpx 0;

		h3 {
			color: #f30;
			font-size: 32rpx;
			margin-left: 25rpx;
		}

		.answers-shop-list {
			margin-top: 20rpx;
			width: 600rpx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			text-align: center;

			.li {
				border: 1px solid #eee;
				padding: 20rpx 80rpx;
				color: #666;
				font-size: 28rpx;
				border-radius: 20rpx;
				margin-top: 40rpx;
			}
		}
	}

	.follow-contanier-box {
		background: #fff;
		border-top: 1px solid #eee;
		margin-bottom: 30rpx;

		.follow-contanier {
			width: 720rpx;
			margin: 0 auto;
			padding-top: 20rpx;
			padding-bottom: 30rpx;

			h3 {
				color: #343434;
				font-size: 28rpx;
				margin-bottom: 10rpx;
				font-weight: bold;
			}

			.follow-list {
				.li {
					font-size: 28rpx;
					color: #666;
					border-bottom: 1px solid #eee;
					padding: 16rpx 0;

				}
			}
		}
	}

	.foot-copy {
		width: 700rpx;
		margin: 0 auto;
		color: #333;
		font-size: 24rpx;
		line-height: 40rpx;
		text-align: left;
		margin-bottom: 30rpx;
		margin-top: 40rpx;
	}
    .menu-list {
    	display: flex;
    	justify-content: space-between;
    	padding: 25rpx 0;
    	background: #fff;
        border-bottom:20rpx solid #f7f7f7;
    	.menu-item {
    		width: 20%;
    		text-align: center;
    
    		div {
    			width: 100rpx;
    			height: 100rpx;
    			margin: 0 auto;
    			text-align: center;
    			line-height: 100rpx;
    			background: #fc5f99;
    			color: #fff;
    			border-radius: 50%;
    
    			i {
    				font-size: 43.75rpx;
    			}
    		}
    
    		h3 {
    			font-size: 25rpx;
    			margin-top: 6.25rpx;
    		}
    	}
    }
</style>
